<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：知己彼--品牌整体对标
 参数：
 事件：
-->
<template>
  <div>
    <toolbar :view-title='viewTitle'>
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        v-link='{path: "/peer"}'>
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <div class="menuButton" @click="showSlideMenu" v-show="!filterOpenState">
          <span class="menuIcon">&nbsp;</span>
          <span>菜单</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class="overall-comparison">
      <select-for-brand :select-a-text="'选择品牌A'"
                        :select-b-text="'选择品牌B'"
                        :default-brand="defaultBrand"
                        :default-org-id="defaultOrgId"
                        :default-category="defaultCategory"
                        :default-category-id="defaultCategoryId"></select-for-brand>
      <!--<table-view id="tableView" :table-title="tableTitle" :thead="thead" :grid-columns="gridColumns"-->
      <!--:table-rows="tableRows" :table-height="'67vh'">-->
      <!--</table-view>-->
      <div class="filter-message-box clearfix">
        <a  v-if="defaultCategory !== ''" class="filter-condition" @click="showFilter('pinlei')" href="javascript:;">{{defaultCategory}}</a>
        <span>
          <a v-if="UrlParams.platform !== ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">{{pingtai}}</a>
          <a v-if="UrlParams.platform === ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">所有平台</a>
        </span>
        <a class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{UrlParams.startTime | formatDate}} - {{UrlParams.endTime | formatDate}}</a>
      </div>
      <div class="split-line"></div>
<!--       <div class="clearfix">
        <ul class="thead">
          <li class="">对比参数</li>
          <li>{{brandA}}</li>
          <li>{{brandB}}</li>
        </ul>
      </div> -->
      <table class="thead">
        <tr class="">
          <th>对比参数</th>
          <th>{{brandA}}</th>
          <th>{{brandB}}</th>
        </tr>
      </table>
      <div class="table-view clearfix">
        <div class="tbody">
          <ul class="params">
            <li v-for="item in paramsNames" track-by="$index">{{item}}</li>
          </ul>
          <ul class="brand" v-for="brand in tableRows" track-by="$index">
            <li class="item" v-for="item in gridColumns" track-by="$index">{{brand[item]}}</li>
          </ul>
        </div>
      </div>

      <filter-view v-show="filterOpenState" :condition="conditions"
                   :page-id="routeKey"
                   :default-start-date="UrlParams.startTime"
                   :default-end-date="UrlParams.endTime"
                   :choose-platforms="pingtai"
                   :choose-platforms-id="pingtaiId"
                   :default-org-id="defaultOrgId"
                   :default-category="defaultCategory"
                   :default-category-id="defaultCategoryId"></filter-view>
      <slide-menu v-show="menuOpenState"></slide-menu>
      <page-turning :mkey="routeKey" :page-id="'peer'"></page-turning>
    </div>
    <div class="loading-box">
      <img src="../../../../static/img/loading.gif" class="loading">
    </div>
    <confirm :show.sync="timeoutStatus"
     title="加载失败,您可以"
     cancel-text="返回首页"
     confirm-text="重新加载"
     @on-cancel="this.$route.router.go('/home')"
     @on-confirm="reload"></confirm>
     <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
     <div class="nodata-wrap" v-if="noData">
       <h1>暂无相关数据!</h1>
     </div>
  </div>
</template>

<script>
  import Toolbar from '../../common/Toolbar.vue'
  import FilterView from '../../common/FilterView.vue'
  import SelectForBrand from '../../peer/selectForBrand.vue'
  import SlideMenu from '../../peer/SlideMenu.vue'
  import pageTurning from '../../common/pageTurning.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      FilterView,
      SelectForBrand,
      SlideMenu,
      pageTurning,
      Confirm
    },
    data: function () {
      return {
        pingtai: '所有平台',
        pingtaiId: '',
        noData: false,
        show: false,
        timeoutStatus: false,
        routeKey: '',
        menuOpenState: false,
        selectAText: '选择产品A',
        selectBText: '选择产品B',
        viewTitle: '品牌整体对标',
        filterOpenState: false,
        tableTitle: '',
        tableRows: [],
        brandA: '',
        brandB: '',
        allResponse: '',
        defaultBrand: '',
        defaultOrgId: '',
        defaultCategory: '',
        defaultCategoryId: '',
        gridColumns: ['avg_price', 'sales', 'qoq_sales_scale', 'sales_prop', 'sales_amount', 'qoq_sales_amount_scale', 'sales_amount_prop', 'score_nums', 'scroe_bad_rate'],
        paramsNames: ['均价(元)', '销量', '销量环比增幅', '销量份额', '销额(万元)', '销额环比增幅', '销额份额', '评论数', '差评率'],
        UrlParams: {
          pageId: 64,
          mkey: 'brandOverallComparison',
          dateSeg: 'other',
          startTime: '',
          endTime: '',
          category_id: '',
          category: '',
          brand1: '',
          brand2: '',
          brand: '',
          org_code: '',
          platform: ''
        }
      }
    },
    methods: {
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      },
      reload: function () {
        window.location.reload()
      },
      goBack: function () {
        this.show = true
        // window.history.back()
      },
//      显示筛选窗
      showFilter: function () {
        this.filterOpenState = true
      },
//      显示页面列表的侧栏
      showSlideMenu: function () {
        this.menuOpenState = true
        var self = this
        setTimeout(function () {
          self.$broadcast('slideStart')
        }, 0)
      },
//      执行筛选
      doFilter: function () {
        this.$broadcast('doFilter')
        this.filterOpenState = false
      },
//      获取页面数据
      getData: function (params) {
//        this.$dispatch('changeLoadingStatus', true)
        this.$http.post(window.interface.peerData, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          if (!data.chartDatas[0] || data.chartDatas[0].detail.length < 2) {
            // window.alert('当前条件下无数据,请重新选择!')
            this.noData = true
            // this.filterOpenState = true
            // return
          } else {
            this.noData = false
          }
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id
          this.UrlParams.startTime = data.startTime || ''
          this.UrlParams.endTime = data.endTime || ''
          this.$dispatch('changeLoadingStatus', false)
          this.allResponse = data
          this.defaultBrand = data.brand || ''
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = this.UrlParams.category = data.category || ''
          this.defaultCategoryId = this.UrlParams.category_id = data.category_id || ''
          this.viewTitle = data.title
          this.tableRows = data.chartDatas[0].detail
          this.brandA = data.chartDatas[0].detail[0].brand
          this.brandB = data.chartDatas[0].detail[1].brand
          this.$broadcast('loadDataDone')
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    events: {
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
//        this.UrlParams.department = filterConditions.department || ''
        this.UrlParams.category = filterConditions.category || ''
        this.UrlParams.category_id = this.defaultCategoryId = filterConditions.category_id || ''
        this.UrlParams.platform = filterConditions.platform || ''
        this.UrlParams.platform_id = filterConditions.platform_id || ''
        this.UrlParams.startTime = filterConditions.starttime || ''
        this.UrlParams.endTime = filterConditions.endtime || ''
        this.UrlParams.dateSeg = filterConditions.dateSeg || ''
        this.UrlParams.org_code = filterConditions.org_code || ''
        this.UrlParams.brand = ''
        this.UrlParams.brand1 = ''
        this.UrlParams.brand2 = ''
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      },
//      选择品牌后重新获取页面数据
      'chooseBrand': function (brandA, brandB) {
        this.UrlParams.brand1 = brandA
        this.UrlParams.brand2 = brandB
        this.UrlParams.brand = brandA + ',' + brandB
        this.brandA = brandA
        this.brandB = brandB
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      }
    },
    ready: function () {
      this.getData(this.UrlParams)
    },
    created: function () {
      this.routeKey = this.$route.query.key
    }
  }
</script>

<style lang='scss' scoped>
  .overall-comparison {
    margin-top: 8vh;
    margin-bottom: 6vh;
  }

  .table-view {
    position: relative;
    height: 56vh;
    overflow-y: scroll;
  }

  .tbody {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }



  ul {
    float: left;
    width: 33.3%;
    text-align: center;

  li {
    height: 1.2rem;
    line-height: 1.2rem;
    vertical-align: middle !important;
  }

  }
  .thead {
    width: 100%;
    background: rgba(188, 219, 255, .4);
  }

  .thead th {
    height: 1.2rem;
    width: 33.3%;
    text-align: center;
    vertical-align: middle !important;
  }

  .brand{
    background: rgba(244, 249, 255, .4);
  }

  .params {
    box-sizing: border-box;
    border-right: 1px solid rgba( 238, 238, 238, 1);
  }

  .split-line {
    width: 100%;
    height: 5px;
    background: #f2f2f2;
  }

  .filter-message-box{
    padding: 0rem .2rem .2rem;
    font-size: 0.28rem;
  }

  .nodata-wrap{
    position: fixed;
    top: 28vh;
    left: 0;
    right: 0;
    bottom: 7vh;
    padding-top: 20vh;
    background: #FFF;
    text-align: center;
  }

</style>
